<template>
	<div class="minishop" id="minishop">
      <div class="miniall">
          <div class="list">
              <div class="li" v-for="item in list" :key="item.id" @click="open(item.id)">
                  <div class="liimg" v-if="item.image1 == ''"><img :src="imagesrc" /></div>
                  <div class="liimg" v-if="item.image1 != ''"><img :src="item.image1" /></div>
                  <div class="lititle" >{{item.title}}</div>
                  <!-- <div class="lititle2" @click="open(item.id)">免费领取</div> -->
              </div>
          </div>
          <!-- <div class="wuliu" @click="gowuliu">物流查询</div> -->
      </div>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
      name: 'minishop',
      data () {
          return {
              list:[],
              shareId:"",
              imagesrc:'/static/img/kenan.jpg',
              fanye:true,
              page:1
          }
      },
	  beforeCreate() {
		  console.log(this.$route)
		  document.title = decodeURI(this.$route.query.shop_name);
	  },
      created() {
          // var h = document.documentElement.clientWidth / 6.4 + 'px';
          //         document.documentElement.style.fontSize = h;
          this.shareId = this.$route.query.share_id
          this.getlist()


          document.title = decodeURI(this.$route.query.shop_name);
      },
      mounted () {
          window.addEventListener('scroll', this.scrollToTop)
      },
      methods:{
          scrollToTop() {
            　var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
              if(scrollTop + window.screen.height + 100 > document.body.scrollHeight && this.fanye == true){
                  this.fanye = false
                  this.page ++
                  this.getlist()
              }
          },
          getlist:function(){
              var that = this
              axios.get('/api/gth/order-pages/for-web?_page_size=20&page='+this.page+'&share_id=' + this.shareId)
              	.then(response => {
                    if(response.data.msg.code == 0){

                        for(var i = 0; i < response.data.data.data.length; i++){
                          that.list.push(response.data.data.data[i])
                        }
                        that.fanye = true
                    }
              	})
          },
          open:function(id){
              window.open(window.location.origin+"/webapp/merchant/templet1.html?share_id="+this.shareId+"&id="+id)
          },
          gowuliu:function(){
              window.location.href = "http://91haoka.cn/webapp/merchant/query.html"
          }
      }
	}

</script>

<style lang="scss" scoped>
	@media (min-width: 1000px){
      .minishop{background: #efefef;
          .miniall{width: 640px; margin: 0 auto;}
          .list{ display: flex;  flex-wrap: wrap; justify-content: space-around; padding: 10px 5px;
              .li{ flex-basis: 300px; max-width: 300px; background: #FFFFFF;  padding-bottom: 5px; margin-bottom: 20px;
                  .liimg{ width: 290px; padding: 5px;
                      img{ width: 290px; height: 290px; display:block}
                  }
                  .lititle{ font-size: 14px; padding: 0px 10px; height: 20px; width: 90%; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
                  .lititle2{ font-size: 14px; padding: 0px 10px; line-height: 25px; color:rgb(255, 179, 0)}

              }
          }
          .wuliu{ display: none;}
      }
	}
  @media (max-width: 1000px){
      .minishop{background: #efefef;
          .list{ display: flex;  flex-wrap: wrap; justify-content: space-around; padding: 0.1rem 0.05rem;
              .li{  width: 49%; background: #FFFFFF;  padding-bottom: 0.05rem; margin-bottom: 0.2rem;
                  .liimg{ width: 100%; padding: 0.05rem;
                      img{ width: 100%; display:block}
                  }
                  .lititle{ font-size: 14px; padding: 0px 10px; height: 20px; width: 90%; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
                  .lititle2{ font-size: 14px; padding: 0px 10px; line-height: 25px; color:rgb(255, 179, 0)}

              }
          }
          .wuliu{ position: fixed; background: #000; color:#FFFFFF; right:20px;  bottom:20px; font-size: 14px;  padding: 10px 20px; text-align: center; border-radius: 3px;
            a{ color:#FFFFFF}
          }
      }
  }

</style>
